import Vue from 'vue'
import Component from 'vue-class-component'
import './shareStyle.css'
import Platform from '@/supports/platform'
import { Indicator, MessageBox, Toast} from 'mint-ui'
import {readFile, uploadImages} from '@/utils/uploadImage/index'
// import {loadImages, uploadImages} from '@/utils/uploadImage/index'

@Component
export default class ShareDetailClass extends Vue {
  productId = ''
  imageList = []
  unselectFlagList = []
  selectFlagList = []
  flagString = ''
  type = ''
  finalImages = []
  productSkuId = ''
  created () {
    this.wrapperHeight = document.documentElement.clientHeight - 108

    eventBus.$on('shareDetail', this.handleLoadImages)
  }

  activated() {
    this.imageList = []
    this.selectFlagList = []
    this.unselectFlagList = []
    this.type = this.$route.params.type
    this.productId = this.$route.params.productId
    this.productSkuId = this.$route.params.skuId
    this.getData()
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  async getData() {
    try {
      let url = '/api/v1/product/share/'
      if (this.type === 'store') {
        url = '/buyer/v1/product/share/'
      }
      const response = await this.$axios.post(url + this.productId + '/' + this.productSkuId, {})

      if (response.status === 0) {
        this.loading = false
        if (response.data.imageUrls.length > 9) {
          this.imageList = response.data.imageUrls.slice(0, 9)
        } else {
          this.imageList = response.data.imageUrls
          this.imageList.push('addImageIcon')
        }
        let allFlags = response.data.flags
        for (var i = 0; i < allFlags.length; i++) {
          let item = allFlags[i]
          if (item.selected) {
            this.selectFlagList.push(item)
          } else {
            this.unselectFlagList.push(item)
          }
        }
        if (this.selectFlagList.length > 0) {
          this.handlerChangeFlagString()
        }
      }
    } catch (e) {
      this.loading = false
      console.log(e)
    }
  }

  handleFiles(e) {
    Platform.choosePhotos('2', 'shareDetail')
  }

  handleLoadImages(images) {
    if (this.imageList.length <= 9) {
      this.imageList = this.imageList.concat(images)
    }
    if (this.imageList.length > 9) {
      for (var i = 0; i < this.imageList.length; i++) {
        if (this.imageList[i] === 'addImageIcon') {
          this.imageList.splice(i, 1)
        }
      }
      this.imageList = this.imageList.slice(0, 9)
    }
  }

  handleDeleteImage (index) {
    this.imageList.splice(index, 1)

    if (this.imageList.length === 8 && this.imageList[7] !== 'addImageIcon') {
      this.imageList.push('addImageIcon')
    }
  }

  createImageItems () {
    return this.imageList.map((value, index) => {
      return <div
                style='width:33%;height:120px;float:left;position:relative;'
                class="color-box"
                v-dragging={{list: this.imageList, item: this.imageList[index], group: 'color'}}
                key={value}>
                {value === 'addImageIcon' ? <div onClick={this.handleFiles} class='shareDetailAddIconClass'>
                    <icon id="shareDetail" name="addImageIcon" scale='8'/>
                  </div> : <div style='height:120px;padding:8%'>
                  <img src={value + '?x-oss-process=image/resize,w_750/quality,q_80'}/>
                  <dd onClick={() => this.handleDeleteImage(index)}><icon name='imageDeleteIcon' scale='2'/></dd>
                  </div>
                }
                </div>
    })
  }

  // 备选Flag
  createFlagList() {
    const item = this.unselectFlagList.map((value, index) => {
      return <div onClick={() => { this.handlerAddSelect(value, index) }}>{value.name}</div>
    })
    return item
  }

  handlerAddSelect(obj, index) {
    this.unselectFlagList.splice(index, 1)
    this.selectFlagList.push(obj)
    this.handlerChangeFlagString()
  }

  // 已选Flag
  createSelectFlagList() {
    const item = this.selectFlagList.map((value, index) => {
      return <div style='background:green' onClick={() => { this.handlerDeleteSelect(value, index) }}>{value.value}</div>
    })
    return item
  }

  handlerDeleteSelect (value, index) {
    this.selectFlagList.splice(index, 1)
    this.unselectFlagList.push(value)
    this.handlerChangeFlagString()
  }

  handlerChangeFlagString () {
    this.flagString = ''

    for (var i = 0; i < this.selectFlagList.length; i++) {
      let valueString = this.selectFlagList[i].name
      let index = valueString.indexOf('描述')

      if (index >= 0) {
        if (this.flagString.length <= 0) {
          this.flagString = this.flagString + '' + this.selectFlagList[i].value + '\n'
        } else {
          this.flagString = this.flagString + '\n' + this.selectFlagList[i].value + '\n'
        }
      } else {
        if (this.flagString.length <= 0) {
          this.flagString = this.flagString + '' + this.selectFlagList[i].value
        } else {
          if (i > 0) {
            let name = this.selectFlagList[i - 1].name
            if (name.indexOf('描述') >= 0) {
              this.flagString = this.flagString + '' + this.selectFlagList[i].value
            } else {
              this.flagString = this.flagString + ' ' + this.selectFlagList[i].value
            }
          }
        }
      }
    }
  }

  updated() {
    for (var i = 0; i < this.imageList.length; i++) {
      if (this.imageList[i] === 'addImageIcon' && i !== this.imageList.length - 1) {
        this.imageList.splice(i, 1)
        this.imageList.push('addImageIcon')
      }
    }
  }

  // 下载图片
  handleDownloadImages () {
    Platform.saveImages(this.imageList)
  }

  // 微信分享
  handleWechatShare () {
    Platform.shareImages(this.imageList)
    Platform.iOSCopy(this.flagString)
  }

  render () {
    return (
      <div class='content' style={this.caculateHeight + ';margin-top:64px;overflow:auto'}>
      <mt-header class='header' fixed title="分享商品图片">
        <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
      </mt-header>

      <div class='shareContentClass'>
        <p>拖动图片调整顺序<font style='color:#666;font-size:14px'>(最多9张)</font></p>
        <div class="color-show">
          {this.createImageItems()}
        </div>
      </div>

      <dl class = 'shareEditContentClass'>
        <dd>备选：</dd>
          <dt>
            {this.createFlagList()}
          </dt>
      </dl>

      <dl class='shareEditContentClass'>
        <dd>已选：</dd>
          <dt>
            {this.createSelectFlagList()}
          </dt>
      </dl>

      <div class='shareFlagStringClass'>
        <p>商品描述预览<font style='font-size:14px;color:gray'>（分享时自动复制到粘贴板）</font></p>
        <mt-field rows="3" style='font-size:14px;padding:0 10px;background: #fff;' placeholder="商品描述预览" type="textarea" v-model={this.flagString}></mt-field>
      </div>

      <dl class = 'shareBottomClass'>
            <dd onClick={this.handleDownloadImages}>下载图片</dd>
            <dd onClick={this.handleWechatShare}>微信分享</dd>
        </dl>

      </div>
    )
  }
}
